<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>表单组件 form - Layui 文档</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script>;!function(){self!==parent&&(location.href="about:blank")}();</script>
  <link href="/public/layui/v/2.8.6/css/layui.css" rel="stylesheet">
  <link href="/public/static/dist/docs/2.8/css/global.css?v=16" rel="stylesheet">
  <script>
  (function(){if(window.JSON&&window.JSON.parse){var c=document.getElementsByTagName("head"),a=document.createElement("link");try{var b=JSON.parse(localStorage.layui)}catch(d){b={}}"dark"===b.themeMode&&(a.href="//res.sentcss.com/static/dist/docs/2.8/css/layui-theme-dark.css?v=16",a.rel="stylesheet",a.id="layuicss-theme-dark",c[0].appendChild(a))}})();
  </script>
</head>
<body>
<div class="layui-header ws-header ws-bg-light">
  <div class="layui-container">
    <div class="ws-logo">
      <a class="logo" href="../../../index.html">
        <img src="/public/static/images/layui/logo.png" alt="layui">
      </a>
    </div>
    <div class="ws-header-assist">
      <div class="layui-form layui-hide-xs ws-search" lay-filter="LAY-ws-header-component"></div>
      <div class="layui-hide-xs ws-notice"></div>
    </div>
    
    <div class="ws-header-menu">
      <ul class="layui-nav layui-bg-gray ws-bg-light" id="LAY_NAV_TOP">
        <li class="layui-nav-item" data-dir="docs">
          <a href="../index.html">组件</a> 
        </li>
        <li class="layui-nav-item" data-dir="notes">
          <a href="../../../notes/index.html">笔记</a> 
        </li>
        <li class="layui-nav-item layui-hide-xs">
          <a href="https://gitee.com/layui/layui/issues" target="_blank" rel="nofollow">社区</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">
            <!--<span class="layui-badge-dot" style="left:0; right: auto; margin: -4px 0 0 5px;"></span>--> 
            生态
          </a>
          <dl class="layui-nav-child layui-nav-child-r" style="margin-right: -21px;">  
            <dd class="layui-hide-sm layui-show-xs" lay-unselect>
              <a href="https://gitee.com/layui/layui/issues" target="_blank" rel="nofollow">社区</a>
              <hr>
            </dd>
            <dd lay-unselect>
              <a href="https://dev.layuion.com/extend/" target="_blank">Layui 第三方扩展组件</a>
            </dd>
            <dd lay-unselect>
              <a href="https://github.com/Sight-wcg/layui-theme-dark" target="_blank" lay-unselect>
                Layui 深色主题 <span>(社区贡献)</span>
              </a>
            </dd>
            <dd lay-unselect>
              <a href="https://gitee.com/layui/layui-vue/" target="_blank" lay-unselect>
                Layui of Vue <span>(他人实现)</span>
              </a>
            </dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">2.8.6</a>
          <dl class="layui-nav-child layui-nav-child-c">  
            <dd lay-unselect class="layui-this"><a href="../../../index.html">2.8.6</a></dd>
            <dd lay-unselect><a href="../../../2.7/index.html">2.7.6</a></dd>
          </dl>
        </li>
      </ul>
      <div class="ws-header-more">
        <i class="layui-icon layui-icon-shrink-right"></i>
      </div>
      <div class="ws-header-tool ws-bg-light">
        <div class="layui-form ws-header-theme" lay-filter="header-theme">
          <input type="checkbox" name="theme-mode" id="ID-header-theme-mode" lay-filter="header-theme-mode" lay-skin="switch">
          <div lay-checkbox>
            <i class="layui-icon layui-icon-moon"></i> | 
            <i class="layui-icon layui-icon-light"></i>
          </div>
        </div>
        <div>
          <a href="https://github.com/layui/layui" target="_blank" title="Github">
            <i class="layui-icon layui-icon-github layui-font-20"></i>
          </a>
        </div>
        <div>
          <a href="https://gitee.com/layui/layui" target="_blank" title="Gitee">
            <i class="layui-icon layui-icon-gitee layui-font-20" style="color: #C71D23;"></i>
            <!--<img src="https://gitee.com/static/images/logo-en.svg" width="21">-->
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 让 IE8/9 兼容响应式栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
 
<div class="layui-container ws-container">
  
<div class="layui-panel ws-menu">
  <ul class="layui-menu layui-menu-lg ws-docs-menu">
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">基础</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../index.html">
              <span>开始使用</span> 
              <span class="layui-font-12 layui-font-gray">Getting Started</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../base.html">
              <span>底层方法</span>
              <span class="layui-font-12 layui-font-gray">Base Function</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../modules.html">
              <span>模块系统</span>
              <span class="layui-font-12 layui-font-gray">Modules</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../versions.html">
              <span>更新日志</span>
              <span class="layui-font-12 layui-font-gray">Versions</span>
              <span class="layui-badge-dot"></span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">布局</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layout/index.html">
              <span>框体</span>
              <span class="layui-font-12 layui-font-gray">Layout</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layout/grid.html">
              <span>栅格</span>
              <span class="layui-font-12 layui-font-gray">Grid</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">通用</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../color/index.html">
              <span>颜色</span>
              <span class="layui-font-12 layui-font-gray">Color</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../button/index.html">
              <span>按钮</span>
              <span class="layui-font-12 layui-font-gray">Button</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../icon/index.html">
              <span>图标</span>
              <span class="layui-font-12 layui-font-gray">Icon</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../anim/index.html">
              <span>动画</span>
              <span class="layui-font-12 layui-font-gray">Anim</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">表单</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="index.html">
              <span>表单组件</span>
              <span class="layui-font-12 layui-font-gray">Form</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="input.html">
              <span>输入框</span>
              <span class="layui-font-12 layui-font-gray">Input / Textarea</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="select.html">
              <span>选择框</span>
              <span class="layui-font-12 layui-font-gray">Select</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="checkbox.html">
              <span>复选框</span>
              <span class="layui-font-12 layui-font-gray">Checkbox</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="radio.html">
              <span>单选框</span>
              <span class="layui-font-12 layui-font-gray">Radio</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">展示</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../table/index.html">
              <span>表格</span>
              <span class="layui-font-12 layui-font-gray">Table</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laypage/index.html">
              <span>分页</span>
              <span class="layui-font-12 layui-font-gray">Laypage</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../treeTable/index.html">
              <span>树形表格</span>
              <span class="layui-font-12 layui-font-gray">TreeTable</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../nav/index.html">
              <span>导航菜单</span>
              <span class="layui-font-12 layui-font-gray">Nav</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../menu/index.html">
              <span>基础菜单</span>
              <span class="layui-font-12 layui-font-gray">Menu</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../tab/index.html">
              <span>选项卡</span>
              <span class="layui-font-12 layui-font-gray">Tab</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../badge/index.html">
              <span>徽章</span>
              <span class="layui-font-12 layui-font-gray">Badge</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../auxiliar/index.html">
              <span>辅助</span>
              <span class="layui-font-12 layui-font-gray">Blockquote / Fieldset / hr</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../class/index.html">
              <span>公共类</span>
              <span class="layui-font-12 layui-font-gray">Class</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../panel/index.html">
              <span>面板</span>
              <span class="layui-font-12 layui-font-gray">Panel / Card / Collapse</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../progress/index.html">
              <span>进度条</span>
              <span class="layui-font-12 layui-font-gray">Progress</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../timeline/index.html">
              <span>时间线</span>
              <span class="layui-font-12 layui-font-gray">Timeline</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../fixbar/index.html">
              <span>固定条</span>
              <span class="layui-font-12 layui-font-gray">Fixbar</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../tree/index.html">
              <span>树组件</span>
              <span class="layui-font-12 layui-font-gray">Tree</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../carousel/index.html">
              <span>轮播</span>
              <span class="layui-font-12 layui-font-gray">Carousel</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../flow/index.html">
              <span>流加载</span>
              <span class="layui-font-12 layui-font-gray">Flow</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../code/index.html">
              <span>代码预览组件</span>
              <span class="layui-font-12 layui-font-gray">Code</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">交互</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../layer/index.html">
              <span>弹出层</span>
              <span class="layui-font-12 layui-font-gray">Layer</span>
              <span class="layui-badge-dot layui-bg-green"></span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laydate/index.html">
              <span>日期与时间选择</span>
              <span class="layui-font-12 layui-font-gray">Laydate</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../upload/index.html">
              <span>上传</span>
              <span class="layui-font-12 layui-font-gray">Upload</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../dropdown/index.html">
              <span>下拉菜单</span>
              <span class="layui-font-12 layui-font-gray">Dropdown</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../colorpicker/index.html">
              <span>颜色选择器</span>
              <span class="layui-font-12 layui-font-gray">Colorpicker</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../transfer/index.html">
              <span>穿梭框</span>
              <span class="layui-font-12 layui-font-gray">Transfer</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../slider/index.html">
              <span>滑块</span>
              <span class="layui-font-12 layui-font-gray">Slider</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../rate/index.html">
              <span>评分</span>
              <span class="layui-font-12 layui-font-gray">Rate</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    <li class="layui-menu-item-group" lay-options="{type: 'group', isAllowSpread: true}">
      <div class="layui-menu-body-title">其他</div>
      <ul>
        <li>
          <div class="layui-menu-body-title">
            <a href="../laytpl/index.html">
              <span>模板引擎</span>
              <span class="layui-font-12 layui-font-gray">Laytpl</span>
            </a>
          </div>
        </li>
        <li>
          <div class="layui-menu-body-title">
            <a href="../util/index.html">
              <span>工具模块</span>
              <span class="layui-font-12 layui-font-gray">Util</span>
            </a>
          </div>
        </li>
      </ul>
    </li>
    
  </ul>
</div>

  <div class="ws-content">
    <div class="layui-text ws-text" id="WS-text">
      <h1>表单组件 🔥</h1>
<blockquote class="layui-elem-quote">
<p>表单组件<code>form</code>是包含输入框、选择框、复选框、开关、单选框等表单项组件的集合，主要用于对表单域进行各类动态化渲染和相关的交互操作。<code>form</code>是 Layui 最常用的组件之一。</p>
</blockquote class="layui-elem-quote">
<h2 id="examples" lay-toc="{anchor: null}" style="margin-bottom: 0;">示例</h2>
<h3 lay-toc="{level: 2, id: 'examples', hot: true}" class="layui-hide">综合演示</h3>
<pre class="layui-code" lay-options="{preview: true, text: {preview: '综合演示'}, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], done: function(obj){
  obj.render()
}}">
  <textarea>
<form class="layui-form" action="index.html">
  <div class="layui-form-item">
    <label class="layui-form-label">验证必填项</label>
    <div class="layui-input-block">
      <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">验证手机号</label>
      <div class="layui-input-inline layui-input-wrap">
        <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone">
      </div>
      <div class="layui-form-mid" style="padding: 0!important;"> 
        <button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">验证码</label>
    <div class="layui-input-inline layui-input-wrap">
      <input type="text" name="vercode" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">验证邮箱</label>
      <div class="layui-input-inline">
        <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">验证日期</label>
      <div class="layui-input-inline layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-date"></i>
        </div>
        <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">自定义验证</label>
    <div class="layui-input-inline layui-input-wrap">
      <input type="password" name="password" lay-verify="required|pass" placeholder="请输入" autocomplete="off" lay-affix="eye" class="layui-input">
    </div>
    <div class="layui-form-mid layui-text-em">6 到 12 位字符</div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">范围</label>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
      </div>
      <div class="layui-form-mid">-</div>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单行选择框</label>
    <div class="layui-input-block">
      <select name="interest" lay-filter="aihao">
        <option value=""></option>
        <option value="0">写作</option>
        <option value="1" selected>阅读</option>
        <option value="2">游戏</option>
        <option value="3">音乐</option>
        <option value="4">旅行</option>
      </select>
    </div>
  </div>  
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">分组选择框</label>
      <div class="layui-input-inline">
        <select name="quiz">
          <option value="">请选择问题</option>
          <optgroup label="城市记忆">
            <option value="你工作的第一个城市">你工作的第一个城市</option>
          </optgroup>
          <optgroup label="学生时代">
            <option value="你的工号">你的工号</option>
            <option value="你最喜欢的老师">你最喜欢的老师</option>
          </optgroup>
        </select>
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">搜索选择框</label>
      <div class="layui-input-inline">
        <select name="modules" lay-verify="required" lay-search>
          <option value="">直接选择或搜索选择</option>
          <option value="1">layer</option>
          <option value="2">form</option>
          <option value="3">layim</option>
          <option value="4">element</option>
          <option value="5">laytpl</option>
          <option value="6">upload</option>
          <option value="7">laydate</option>
          <option value="8">laypage</option>
          <option value="9">flow</option>
          <option value="10">util</option>
          <option value="11">code</option>
          <option value="12">tree</option>
          <option value="13">layedit</option>
          <option value="14">nav</option>
          <option value="15">tab</option>
          <option value="16">table</option>
          <option value="17">select</option>
          <option value="18">checkbox</option>
          <option value="19">switch</option>
          <option value="20">radio</option>
        </select>
      </div>
    </div>
  </div> 
  <div class="layui-form-item">
    <label class="layui-form-label">联动选择框</label>
    <div class="layui-input-inline">
      <select name="quiz1">
        <option value="">请选择省</option>
        <option value="浙江" selected>浙江省</option>
        <option value="你的工号">江西省</option>
        <option value="你最喜欢的老师">福建省</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="quiz2">
        <option value="">请选择市</option>
        <option value="杭州">杭州</option>
        <option value="宁波" disabled>宁波</option>
        <option value="温州">温州</option>
        <option value="温州">台州</option>
        <option value="温州">绍兴</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="quiz3">
        <option value="">请选择县/区</option>
        <option value="西湖区">西湖区</option>
        <option value="余杭区">余杭区</option>
        <option value="拱墅区">临安市</option>
      </select>
    </div>
    <div class="layui-form-mid layui-text-em">
      <i class="layui-icon layui-icon-tips" lay-tips="{
        content: '此处只是演示联动排版，并未做联动交互',
        margin: '0 0 0 -10px'
      }"></i>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="arr[0]" title="选项1">
      <input type="checkbox" name="arr[1]" title="选项2" checked>
      <input type="checkbox" name="arr[2]" title="选项3">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">标签框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="arr1[0]" lay-skin="tag" title="选项1" checked>
      <input type="checkbox" name="arr1[1]" lay-skin="tag" title="选项2">
      <input type="checkbox" name="arr1[2]" lay-skin="tag" title="选项3" disabled>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="open" lay-skin="switch" lay-filter="switchTest" title="ON|OFF">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男" checked>
      <input type="radio" name="sex" value="女" title="女">
      <input type="radio" name="sex" value="禁" title="禁用" disabled>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">普通文本域</label>
    <div class="layui-input-block">
      &lt;textarea placeholder="请输入内容" class="layui-textarea"&gt;&lt;/textarea&gt;
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<!-- import layui -->
<script>
layui.use(['form', 'laydate', 'util'], function(){
  var form = layui.form;
  var layer = layui.layer;
  var laydate = layui.laydate;
  var util = layui.util;
  
  // 自定义验证规则
  form.verify({
    pass: [
      /^[\S]{6,12}$/,
      '密码必须6到12位，且不能出现空格'
    ]
  });
  
  // 指定开关事件
  form.on('switch(switchTest)', function(data){
    layer.msg('开关 checked：'+ (this.checked ? 'true' : 'false'), {
      offset: '6px'
    });
    layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是 ON|OFF', data.othis)
  });
  
  // 提交事件
  form.on('submit(demo1)', function(data){
    var field = data.field; // 获取表单字段值
    // 显示填写结果，仅作演示用
    layer.alert(JSON.stringify(field), {
      title: '当前填写的字段值'
    });
    // 此处可执行 Ajax 等操作
    // …
    return false; // 阻止默认 form 跳转
  });
  
  // 日期
  laydate.render({
    elem: '#date'
  });
  
  // 普通事件
  util.on('lay-on', {
    // 获取验证码
    "get-vercode": function(othis){
      var isvalid = form.validate('.demo-phone'); // 主动触发验证，v2.7.0 新增 
      // 验证通过
      if(isvalid){
        layer.msg('手机号规则验证通过');
        // 此处可继续书写「发送验证码」等后续逻辑
        // …
      }
    }
  });
});
</script>
  </textarea>
</pre>
<h3 id="pane" lay-toc="{level: 2}">方框风格</h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], codeStyle: 'height: 508px;', tools: ['full'], done: function(obj){
  obj.render()
}}">
  <textarea>
<!-- 给容器追加 class="layui-form-pane"，即可显示为方框风格 -->
<form class="layui-form layui-form-pane" action="index.html">
  <div class="layui-form-item">
    <label class="layui-form-label">长输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" autocomplete="off" placeholder="请输入" lay-verify="required" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">日期选择</label>
      <div class="layui-input-block">
        <input type="text" name="date" id="date1" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">行内表单</label>
      <div class="layui-input-inline">
        <input type="text" name="number" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-inline">
      <input type="password" name="password" placeholder="请输入" lay-verify="required" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-text-em">请务必填写用户名</div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">范围</label>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
      </div>
      <div class="layui-form-mid">-</div>
      <div class="layui-input-inline" style="width: 100px;">
        <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-inline">
      <select name="interest" lay-filter="aihao">
        <option value=""></option>
        <option value="0">写作</option>
        <option value="1" selected>阅读</option>
        <option value="2">游戏</option>
        <option value="3">音乐</option>
        <option value="4">旅行</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item" pane>
    <label class="layui-form-label">开关-默认开</label>
    <div class="layui-input-block">
      <input type="checkbox" checked name="open" lay-skin="switch" lay-filter="switchTest" title="开关">
    </div>
  </div>
  <div class="layui-form-item" pane>
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男" checked>
      <input type="radio" name="sex" value="女" title="女">
      <input type="radio" name="sex" value="禁" title="禁用" disabled>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
      &lt;textarea placeholder="请输入内容" class="layui-textarea"&gt;&lt;/textarea&gt;
    </div>
  </div>
  <div class="layui-form-item">
    <button class="layui-btn" lay-submit lay-filter="demo2">确认</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</form>
<!-- import layui --> 
<script>
layui.use(['form'], function(){
  var form = layui.form;
  var layer = layui.layer;
  // 提交事件
  form.on('submit(demo2)', function(data){
    var field = data.field; // 获取表单字段值
    // 显示填写结果，仅作演示用
    layer.alert(JSON.stringify(field), {
      title: '当前填写的字段值'
    });
    // 此处可执行 Ajax 等操作
    // …
    return false; // 阻止默认 form 跳转
  });
});
</script>
  </textarea>
</pre>
<h3 id="login" lay-toc="{level: 2}">登录模板 <sup>2.8+</sup></h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], codeStyle: 'height: 508px;', tools: ['full'], done: function(obj){
  obj.render()
}}">
  <textarea>
<style>
.demo-login-container{width: 320px; margin: 21px auto 0;}
.demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
<form class="layui-form">
  <div class="demo-login-container">
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-username"></i>
        </div>
        <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-password"></i>
        </div>
        <input type="password" name="password" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-row">
        <div class="layui-col-xs7">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-vercode"></i>
            </div>
            <input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
          </div>
        </div>
        <div class="layui-col-xs5">
          <div style="margin-left: 10px;">
            <img src="https://www.oschina.net/action/user/captcha" onclick="this.src='https://www.oschina.net/action/user/captcha?t='+ new Date().getTime();">
          </div>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
      <a href="index.html#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
    </div>
    <div class="layui-form-item">
      <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
    </div>
    <div class="layui-form-item demo-login-other">
      <label>社交账号登录</label>
      <span style="padding: 0 21px 0 6px;">
        <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
        <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
        <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
      </span>
      或 <a href="index.html#reg">注册帐号</a>
    </div>
  </div>
</form>
<!-- import layui --> 
<script>
layui.use(function(){
  var form = layui.form;
  var layer = layui.layer;
  // 提交事件
  form.on('submit(demo-login)', function(data){
    var field = data.field; // 获取表单字段值
    // 显示填写结果，仅作演示用
    layer.alert(JSON.stringify(field), {
      title: '当前填写的字段值'
    });
    // 此处可执行 Ajax 等操作
    // …
    return false; // 阻止默认 form 跳转
  });
});
</script>
  </textarea>
</pre>
<h3 id="reg" lay-toc="{level: 2}">注册模板 <sup>2.8+</sup></h3>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], codeStyle: 'height: 508px;', tools: ['full'], done: function(obj){
  obj.render()
}}">
  <textarea>
<style>
.demo-reg-container{width: 320px; margin: 21px auto 0;}
.demo-reg-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
<form class="layui-form">
  <div class="demo-reg-container">
    <div class="layui-form-item">
      <div class="layui-row">
        <div class="layui-col-xs7">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-cellphone"></i>
            </div>
            <input type="text" name="cellphone" value="" lay-verify="required|phone" placeholder="手机号" lay-reqtext="请填写手机号" autocomplete="off" class="layui-input" id="reg-cellphone">
          </div>
        </div>
        <div class="layui-col-xs5">
          <div style="margin-left: 11px;">
            <button type="button" class="layui-btn layui-btn-fluid layui-btn-primary" lay-on="reg-get-vercode">获取验证码</button>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-vercode"></i>
        </div>
        <input type="text" name="vercode" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-password"></i>
        </div>
        <input type="password" name="password" value="" lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-password"></i>
        </div>
        <input type="password" name="confirmPassword" value="" lay-verify="required|confirmPassword" placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-wrap">
        <div class="layui-input-prefix">
          <i class="layui-icon layui-icon-username"></i>
        </div>
        <input type="text" name="nickname" value="" lay-verify="required" placeholder="昵称" autocomplete="off" class="layui-input" lay-affix="clear">
      </div>
    </div>
    <div class="layui-form-item">
      <input type="checkbox" name="agreement" lay-verify="required" lay-skin="primary" title="同意"> 
      <a href="index.html#terms" target="_blank" style="position: relative; top: 6px; left: -15px;">
        <ins>用户协议</ins>
      </a>
    </div>
    <div class="layui-form-item">
      <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-reg">注册</button>
    </div>
    <div class="layui-form-item demo-reg-other">
      <label>社交账号注册</label>
      <span style="padding: 0 21px 0 6px;">
        <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
        <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
        <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
      </span>
      <a href="index.html#login">登录已有帐号</a>
    </div>
  </div>
</form>
<!-- import layui --> 
<script>
layui.use(function(){
  var $ = layui.$;
  var form = layui.form;
  var layer = layui.layer;
  var util = layui.util;
  
  // 自定义验证规则
  form.verify({
    // 确认密码
    confirmPassword: function(value, item){
      var passwordValue = $('#reg-password').val();
      if(value !== passwordValue){
        return '两次密码输入不一致';
      }
    }
  });
  
  // 提交事件
  form.on('submit(demo-reg)', function(data){
    var field = data.field; // 获取表单字段值
    
    // 是否勾选同意
    if(!field.agreement){
      layer.msg('您必须勾选同意用户协议才能注册');
      return false;
    }
    
    // 显示填写结果，仅作演示用
    layer.alert(JSON.stringify(field), {
      title: '当前填写的字段值'
    });
    
    // 此处可执行 Ajax 等操作
    // …
    
    return false; // 阻止默认 form 跳转
  });
  
  // 普通事件
  util.on('lay-on', {
    // 获取验证码
    'reg-get-vercode': function(othis){
      var isvalid = form.validate('#reg-cellphone'); // 主动触发验证，v2.7.0 新增 
      // 验证通过
      if(isvalid){
        layer.msg('手机号规则验证通过');
        // 此处可继续书写「发送验证码」等后续逻辑
        // …
      }
    }
  });
});
</script>
  </textarea>
</pre>
<p>更多其他表单模板均可自由布局实现，为了避免影响文档其他重要版面的阅读，我们就不做过多演示了。</p>
<h2 id="layout" lay-toc="{title: '布局'}">表单布局</h2>
<h3>🌕 普通布局</h3>
<p>在上文的「<a href="index.html#examples">综合演示</a>」示例中，我们用的是 form 组件自身的普通布局。其要点为：</p>
<ul>
<li>通过 <code>class=&quot;layui-form&quot;</code> 定义一个表单域，通常设置在<code>&lt;form&gt;</code>标签上， 或普通<code>&lt;div&gt;</code> 标签亦可。</li>
<li>通过 <code>class=&quot;layui-form-item&quot;</code> 定义一个块级元素的表单项容器</li>
<li>通过 <code>class=&quot;layui-form-label&quot;</code> 定义标签</li>
<li>通过 <code>class=&quot;layui-form-block&quot;</code> 定义表单项父容器为块级元素</li>
<li>通过 <code>class=&quot;layui-form-inline&quot;</code> 或 <code>class=&quot;layui-inline&quot;</code> 定义表单项父容器为行内块元素</li>
</ul>
<p>即必须按照规定的层级定义相应的 <code>class</code>。</p>
<h3>🌕 栅格布局</h3>
<p>form 还可以借助<em class="layui-text-em">栅格</em>实现更灵活的响应式布局。</p>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], codeStyle: 'height: 500px;', done: function(obj){
  obj.render()
}}">
  <textarea>
<form class="layui-form layui-row layui-col-space16">
  <div class="layui-col-sm3">
    <input type="text" name="A" placeholder="Field A" class="layui-input">
  </div>
  <div class="layui-col-sm3">
    <div class="layui-input-wrap">
      <input type="text" name="B" placeholder="Field B" lay-affix="clear" class="layui-input">
    </div>
  </div>
  <div class="layui-col-sm3">
    <input type="text" name="C" placeholder="Field C" class="layui-input">
  </div>
  <div class="layui-col-sm3">
    <input type="text" name="D" placeholder="Field D" class="layui-input">
  </div>
  <div class="layui-col-md6">
    <div class="layui-form-item" style="margin-bottom: 0;">
      <label class="layui-form-label">Field E :</label>
      <div class="layui-input-block">
        <input type="text" name="E" placeholder="请输入" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-col-md6">
    <div class="layui-form-item" style="margin-bottom: 0;">
      <label class="layui-form-label">Field F :</label>
      <div class="layui-input-block">
        <select name="quiz1">
          <option value="">省份</option>
          <option value="浙江">浙江省</option>
          <option value="江西">江西省</option>
          <option value="福建">福建省</option>
        </select>
      </div>
    </div>
  </div>
  <div class="layui-col-md4">
    <div class="layui-input-wrap">
      <div class="layui-input-prefix">
        <i class="layui-icon layui-icon-username"></i>
      </div>
      <input type="text" name="G" value="" required placeholder="Field G" class="layui-input" lay-affix="clear">
    </div>
  </div>
  <div class="layui-col-md4">
    <div class="layui-input-wrap">
      <input type="text" name="H" required placeholder="Field H" id="demo-search-more" class="layui-input">
      <div class="layui-input-suffix">
        <i class="layui-icon layui-icon-more-vertical"></i>
      </div>
    </div>
  </div>
  <div class="layui-col-md4">
    <div class="layui-input-wrap">
      <div class="layui-input-prefix">
        <i class="layui-icon layui-icon-date"></i>
      </div>
      <input type="text" name="I" required placeholder="Field I" class="layui-input demo-search-date">
      <div class="layui-input-suffix">
        <i class="layui-icon layui-icon-down"></i>
      </div>
    </div>
  </div>
  <div class="layui-btn-container layui-col-xs12">
    <button class="layui-btn" lay-submit lay-filter="demo-search">Search</button>
    <button type="reset" class="layui-btn layui-btn-primary">Reset</button>
  </div>
</form>
<!-- import layui -->  
<script>
layui.use(function(){
  var form = layui.form;
  var layer = layui.layer;
  var laydate = layui.laydate;
  var dropdown = layui.dropdown;
  // 提交
  form.on('submit(demo-search)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '当前填写的字段值'
    });
    // 此处可执行 Ajax 等操作
    // …
    return false; // 阻止默认 form 跳转
  });
  // 下拉菜单
  dropdown.render({
    elem: '#demo-search-more',
    data: [{
      title: 'List A'
    },{
      title: 'List B'
    },{
      title: 'List C'
    }],
    click: function(obj, othis){
      this.elem.val(obj.title);
    },
    style: 'width: 245px;'
  })
  // 日期
  laydate.render({
    elem: '.demo-search-date'
  });
});
 </script>
  </textarea>
</pre>
<h2 id="api" lay-toc="{hot: 1}">API</h2>
<table class="layui-table">
<thead>
<tr>
<th>API</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>var form = layui.form</td>
<td>获得 <code>form</code> 模块。</td>
</tr>
<tr>
<td><a href="index.html#render">form.render(type, filter)</a></td>
<td>表单域组件渲染，核心方法。<a href="index.html#render">#用法</a></td>
</tr>
<tr>
<td><a href="index.html#verify">form.verify(obj)</a></td>
<td>自定义表单验证的规则。<a href="index.html#verify">#用法</a></td>
</tr>
<tr>
<td><a href="index.html#validate">form.validate(elem)</a> <sup>2.7+</sup></td>
<td>主动触发执行验证。<a href="index.html#validate">#用法</a></td>
</tr>
<tr>
<td><a href="index.html#val">form.val(filter, obj)</a></td>
<td>表单赋值或取值。 <a href="index.html#val">#用法</a></td>
</tr>
<tr>
<td><a href="index.html#submit">form.submit(filter, callback)</a> <sup>2.7+</sup></td>
<td>用于主动执行指定表单的提交。<a href="index.html#submit">#用法</a></td>
</tr>
<tr>
<td><a href="index.html#on">form.on('event(filter)', callback)</a></td>
<td>事件。<a href="index.html#on">#用法</a></td>
</tr>
<tr>
<td><a href="index.html#set">form.set(options)</a></td>
<td>设置 form 组件全局配置项。</td>
</tr>
<tr>
<td>form.config</td>
<td>获取 form 组件全局配置项。</td>
</tr>
</tbody>
</table class="layui-table">
<h2 id="attr" lay-toc="{level: 2}">属性</h2>
<p>在表单域中，有时还需要定义一些特定属性来配合组件的使用，它们一般以 <code>lay-*</code> 为命名格式，如：</p>
<pre><code class="layui-code">&lt;form class=&quot;layui-form&quot; lay-filter=&quot;form-1&quot;&gt;
  &lt;input type=&quot;text&quot; class=&quot;layui-input&quot; lay-verify=&quot;email&quot;&gt;
  &lt;input type=&quot;checkbox&quot; lay-skin=&quot;switch&quot; lay-filter=&quot;agree&quot; title=&quot;同意&quot;&gt;
  &lt;button class=&quot;layui-btn&quot; lay-submit&gt;提交&lt;/button&gt;
&lt;/form&gt;
</code></pre>
<p>以下为 <code>form</code> 组件的特定属性列表：</p>
<table class="layui-table">
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>title</td>
<td>自定义</td>
<td>设置表单元素标题，一般用于 <code>checkbox,radio</code> 元素</td>
</tr>
<tr>
<td>lay-filter</td>
<td>自定义</td>
<td>设置表单元素的过滤器，以便用于执行相关方法时的参数匹配</td>
</tr>
<tr>
<td>lay-verify</td>
<td><code>required</code>必填项 <br><code>phone</code>手机号 <br><code>email</code>邮箱 <br><code>url</code>网址<br><code>number</code>数字<br><code>date</code>日期<br><code>identity</code>身份证<hr><code>自定义规则值</code></td>
<td>设置表单项的验证规则，支持单条或多条规则（多条用<code>|</code>分隔），如：<br><code>lay-verify=&quot;required&quot;</code> <br><code>lay-verify=&quot;required|email&quot;</code><br><code>lay-verify=&quot;其他自定义规则值&quot;</code> <hr>自定义规则的用法：<a href="index.html#verify">#详见</a></td>
</tr>
<tr>
<td>lay-vertype</td>
<td><code>tips</code>吸附层<br><code>alert</code> 对话框<br><code>msg</code> 默认</td>
<td>设置验证异常时的提示层模式</td>
</tr>
<tr>
<td>lay-reqtext</td>
<td>自定义</td>
<td>设置<em class="layui-text-em">必填项</em>（<code>lay-verify=&quot;required&quot;</code>）的默认提示文本</td>
</tr>
<tr>
<td>lay-affix</td>
<td><a href="input.html#affix">#详见</a></td>
<td>输入框动态点缀，<code>&lt;input type=&quot;text&quot;&gt;</code>元素 <strong>私有属性</strong></td>
</tr>
<tr>
<td>lay-skin</td>
<td><a href="checkbox.html#default">#详见</a></td>
<td>设置 UI 风格。 <code>&lt;input type=&quot;checkbox&quot;&gt;</code> 元素 <strong>私有属性</strong></td>
</tr>
<tr>
<td>lay-search</td>
<td>默认不区分大小写;<br>设置<code>cs</code>区分大小写</td>
<td>给 <code>select</code> 组件开启搜索功能。<code>&lt;select&gt;</code> 元素 <strong>私有属性</strong></td>
</tr>
<tr>
<td>lay-submit</td>
<td>无需值</td>
<td>设置元素（一般为<code>&lt;button&gt;</code> 标签）触发 <code>submit</code> 提交事件</td>
</tr>
<tr>
<td>lay-ignore</td>
<td>无需值</td>
<td>设置表单元素忽略渲染，即让元素保留系统原始 UI 风格</td>
</tr>
</tbody>
</table class="layui-table">
<h2 id="render" lay-toc="{hot: true, level: 2}">渲染</h2>
<p><code>form.render(type, filter);</code></p>
<ul>
<li>参数 <code>type</code> 可选，对应表单组件类型，支持：<code>input,select,checkbox,radio</code>；若不填，则指向所有类型。</li>
<li>参数 <code>filter</code> 可选，对应 <code>class=&quot;layui-form&quot;</code> 所在元素的 <code>lay-filter</code> 属性值，用于指定需渲染的表单区域。</li>
</ul>
<h3><strong>常规渲染</strong></h3>
<p><code>form</code> 组件会在元素加载完毕后，自动对所有表单区域完成一次渲染，因此该方法主要用于对<em class="layui-text-em">动态插入</em>的表单元素的渲染。</p>
<pre><code class="layui-code">&lt;form class=&quot;layui-form&quot; lay-filter=&quot;test&quot;&gt;
  动态插入的表单域
&lt;/form&gt;
  
&lt;!-- import layui --&gt; 
&lt;script&gt;
layui.use(function(){
  var form = layui.form;
  
  // 当表单元素被插入插入时，需进行组件渲染才能显示
  form.render(); // 渲染全部表单
  form.render('select'); // 仅渲染 select 元素
  form.render(null, 'test'); // 仅渲染 lay-filter=&quot;test&quot; 的容器内的全部表单
  form.render('checkbox', 'test'); // 仅渲染  lay-filter=&quot;test&quot; 的容器内的 checkbox 元素
})
&lt;/script&gt;
</code></pre>
<h3><strong>定向渲染</strong> <sup>2.7+</sup></h3>
<p>该方法还允许指定表单元素的 jQuery 对象，从而完成定向渲染。且支持两种方式的指向：</p>
<ul>
<li>若 jQuery 对象指向表单域容器（<code>class=&quot;layui-form&quot;</code>），则渲染该表单域中的所有表单项；<sup>2.8+</sup></li>
<li>若 jQuery 对象指向的不是表单域容器，则只对该对象进行渲染</li>
</ul>
<p>定向渲染在页面出现大量表单时，可以极大地减少表单组件渲染时的性能开销，建议灵活运用。</p>
<pre><code class="layui-code">&lt;div class=&quot;layui-form&quot; id=&quot;form-id&quot;&gt;
  &lt;select id=&quot;select-id&quot;&gt;
    &lt;option value=&quot;a&quot;&gt;A&lt;/option&gt;
  &lt;/select&gt;
  &lt;!-- 其他表单元素 --&gt;
&lt;/div&gt;
 
&lt;!-- import layui --&gt; 
&lt;script&gt; 
layui.use('form', function(){
  var $ = layui.$;
  var form = layui.form;
  
  // 定向渲染（一般当表单存在动态生成时，进行渲染）
  // 传入需要渲染的相应表单元素的 jQuery 对象 
  form.render($('#form-id')); // 渲染 id=&quot;form-id&quot; 的表单域中的所有表单项
  form.render($('#select-id')); // 仅渲染 id=&quot;select-id&quot; 的表单项
});
&lt;/script&gt;
</code></pre>
<h3><strong>忽略渲染</strong></h3>
<p>若表单域中的部分表单不需要 Layui 来渲染，那么可通过 <code>lay-ignore</code> 属性让其保留系统原始 UI 风格。</p>
<pre class="layui-code" lay-options="{preview: true, done: function(obj){
  obj.render()
}}">
  <textarea>
<div class="layui-form">
  <select>
    <option value="a">正常渲染的 select</option>
  </select>
  <input type="checkbox" lay-skin="primary" title="正常渲染的 checkbox">
  <hr>
  <select lay-ignore>
    <option value="">忽略渲染的 select</option>
  </select>
  <input type="checkbox" lay-ignore> 忽略渲染的 checkbox
</div>
  </textarea>
</pre>
<h2 id="lay-verify" lay-toc="{hot: true, level: 2}">验证</h2>
<p>Layui 对表单做了相对巧妙的支持，只需在表单元素上设置 <code>lay-verify=&quot;&quot;</code> 属性值即可指定验证规则，如：</p>
<pre><code class="layui-code">&lt;div class=&quot;layui-form&quot;&gt;
  &lt;input type=&quot;text&quot; lay-verify=&quot;required&quot;&gt;
  &lt;input type=&quot;text&quot; lay-verify=&quot;email&quot;&gt;
  &lt;input type=&quot;text&quot; lay-verify=&quot;required|phone|number&quot;&gt;
  &lt;button class=&quot;layui-btn&quot; lay-submit&gt;提交&lt;/button&gt;
&lt;/div&gt;
</code></pre>
<p>其中，<code>lay-verify</code> 属性的内置规则值可参考上文的：<a href="index.html#attr">#属性介绍</a>。 当表单提交时，会自动触发验证。</p>
<h3 id="verify" lay-toc="{level: 3, title: '定义验证规则'}" class="ws-bold">自定义验证规则</h3>
<p><code>form.verify(obj);</code></p>
<ul>
<li>参数 <code>obj</code> 是一个对象，用于定义验证规则的集合。</li>
</ul>
<p>当内置的验证规则无法满足业务需求时，我们可以通过该方法自定义验证规则。如：</p>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', done: function(obj){
  obj.render()
}}">
  <textarea>
<form class="layui-form">
  <input type="text" name="username" lay-verify="required|username" placeholder="用户名" class="layui-input">
  <hr>
  <input type="password" name="password" lay-verify="password" placeholder="密码" class="layui-input">
  <hr>
  <button class="layui-btn" lay-submit lay-filter="demo-verify">提交</button>
</form>
<!-- import layui --> 
<script>
layui.use(function(){
  var form = layui.form;
  // 自定义验证规则，如下以验证用户名和密码为例
  form.verify({
    // 函数写法
    // 参数 value 为表单的值；参数 item 为表单的 DOM 对象
    username: function(value, item){
      if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
        return '用户名不能有特殊字符';
      }
      if(/(^_)|(__)|(_+$)/.test(value)) return '用户名首尾不能出现 _ 下划线';
      if(/^\d+$/.test(value)) return '用户名不能全为数字';
      
      // 若不想自动弹出默认提示框，可返回 true，这时你可以通过其他提示方式替代（v2.5.7 新增）
      if(value === 'xxx'){
        alert('用户名不能为敏感词');
        return true;
      }
    },
    // 数组写法。
    // 数组中两个成员值分别代表：[正则表达式、正则匹配不符时的提示文字]
    password: [/^[\S]{6,12}$/, '密码必须为6到12位的非空字符'] 
  });
  // 提交事件
  form.on('submit(demo-verify)', function(data){
    var field = data.field; // 获取表单字段值
    // 显示填写结果，仅作演示用
    layer.alert(JSON.stringify(field), {
      title: '当前填写的字段值'
    });
    // 此处可执行 Ajax 等操作
    // …
    return false; // 阻止默认 form 跳转
  });
}) 
</script>   
  </textarea>
</pre>
<p>更多「自定义验证规则」示例参考：</p>
<blockquote class="layui-elem-quote">
<ul>
<li><a href="https://gitee.com/layui/layui/issues/I5HC2L#note_11673264_link" target="_blank">将 form 提示语显示在表单项旁边，并在提交时批量触发验证</a></li>
<li><a href="https://gitee.com/layui/layui/issues/I42C7I#note_12020414_link" target="_blank">重置 form 内置验证规则，让其：当非空值才进行验证；加了 required 时才验证非空</a></li>
</ul>
</blockquote class="layui-elem-quote">
<h3 id="validate" lay-toc="{level: 3}" class="ws-bold">主动触发验证  <sup>2.7+</sup></h3>
<p><code>form.validate(elem);</code></p>
<ul>
<li>参数 <code>elem</code> 为元素选择器或 jQuery 对象； 若验证通过，该方法将返回 true，否则返回 false</li>
</ul>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', done: function(obj){
  obj.render()
}}">
  <textarea>
<div class="layui-form">  
  <div class="layui-form-item">
    <label class="layui-form-label">手机</label>
    <div class="layui-input-block">
      <input type="tel" name="phone" lay-verify="required|phone" class="layui-input" id="validate-phone">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">验证码</label>
    <div class="layui-input-inline">
      <input type="text" name="vercode" lay-verify="required" class="layui-input">
    </div>
    <div class="layui-inline"> 
      <button type="button" class="layui-btn layui-btn-primary" id="validate-get-vercode">获取验证码</button>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="demo-validate">提交</button>
    </div>
  </div>
</div>
<!-- import layui --> 
<script>
layui.use(function(){
  var $ = layui.$;
  var form = layui.form;
  var layer = layui.layer;
  
  // 点击获取验证码
  $('#validate-get-vercode').on('click', function(){
    var isValid = form.validate('#validate-phone');  // 主动触发验证，v2.7.0 新增 
    // 验证通过
    if(isValid){
      layer.msg('手机号规则验证通过');
      // 此处可继续书写「发送验证码」等后续逻辑
      // …
    }
  });
  // 提交事件
  form.on('submit(demo-validate)', function(data){
    var field = data.field; // 获取表单字段值
    // 显示填写结果，仅作演示用
    layer.alert(JSON.stringify(field), {
      title: '当前填写的字段值'
    });
    // 此处可执行 Ajax 等操作
    // …
    return false; // 阻止默认 form 跳转
  });
});
</script>  
  </textarea>
</pre>
<h2 id="val" lay-toc="{level: 2}">赋值/取值</h2>
<p><code>form.val(filter, obj);</code></p>
<ul>
<li>参数 <code>filter</code> 为表单域容器（<code>class=&quot;layui-form&quot;</code>）的 <code>lay-filter</code> 属性值</li>
<li>参数 <code>obj</code> 可选。若参数存在，则对表单域进行赋值；若参数不存在，则为对表单域进行取值。</li>
</ul>
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], codeStyle: 'height: 508px;', tools: ['full'], done: function(obj){
  obj.render()
}}">
  <textarea>
<form class="layui-form" action="index.html" lay-filter="demo-val-filter">
  <div class="layui-btn-container" style="margin-bottom: 6px; text-align: center;">
    <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">赋值</button>
    <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值</button>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-block">
      <input type="password" name="password" placeholder="请输入" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
      <select name="interest" lay-filter="aihao">
        <option value=""></option>
        <option value="0">写作</option>
        <option value="1">阅读</option>
        <option value="2">游戏</option>
        <option value="3">音乐</option>
        <option value="4">旅行</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读">
      <input type="checkbox" name="like[daze]" title="发呆">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男" checked>
      <input type="radio" name="sex" value="女" title="女">
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
      &lt;textarea placeholder="请输入" class="layui-textarea" name="desc"&gt;&lt;/textarea&gt;
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit lay-filter="demo-val">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<!-- import layui --> 
<script>
layui.use(function(){
  var $ = layui.$;
  var form = layui.form;
  // 表单赋值
  $('#LAY-component-form-setval').on('click', function(){
    form.val('demo-val-filter', {
      "username": "贤心", // "name": "value"
      "password": "AAAAAA",
      "interest": 1,
      "like[write]": true, // 复选框选中状态
      "close": true, // 开关状态
      "sex": "女",
      "desc": "Layui 用于更简单快速地构建网页界面"
    });
  });
  // 表单取值
  layui.$('#LAY-component-form-getval').on('click', function(){
    var data = form.val('demo-val-filter');
    alert(JSON.stringify(data));
  });
  // 提交事件
  form.on('submit(demo-val)', function(data){
    var field = data.field; // 获取表单字段值
    // 显示填写结果，仅作演示用
    layer.alert(JSON.stringify(field), {
      title: '当前填写的字段值'
    });
    // 此处可执行 Ajax 等操作
    // …
    return false; // 阻止默认 form 跳转
  });
})
</script>
  </textarea>
</pre>
<h2 id="submit" lay-toc="{hot: true, level: 2}">提交</h2>
<p>表单的提交可以通过事件触发或方法触发</p>
<h3><strong>提交事件</strong></h3>
<p>在表单域中，对指定按钮设置 <code>lay-submit</code> 属性，即意味着点击该按钮时，将触发提交事件。如：</p>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', done: function(obj){
  obj.render()
}}">
  <textarea>
<form class="layui-form">  
  <input type="text" name="nickname" lay-verify="required" class="layui-input">
  <hr>
  <button class="layui-btn" lay-submit lay-filter="demo-submit">提交按钮</button>
  <button class="layui-btn" id="test-btn-other">普通按钮</button>
</form>
<!-- import layui --> 
<script>
layui.use(function(){
  var $ = layui.$;
  var form = layui.form;
  var layer = layui.layer;
  // 提交事件
  form.on('submit(demo-submit)', function(data){
    var field = data.field; // 获取表单全部字段值
    var elem = data.elem; // 获取当前触发事件的元素 DOM 对象，一般为 button 标签
    var elemForm = data.form; // 获取当前表单域的 form 元素对象，若容器为 form 标签才会返回。
    // 显示填写结果，仅作演示用
    layer.alert(JSON.stringify(field), {
      title: '当前填写的字段值'
    });
    // 此处可执行 Ajax 等操作
    // …
    return false; // 阻止默认 form 跳转
  });
  // 普通按钮
  $('#test-btn-other').on('click', function(){
    layer.msg('点击未设置特定属性的按钮不会触发组件的提交事件');
    return false;
  });
});
</script>
  </textarea>
</pre>
<h3><strong>提交方法</strong> <sup>2.7+</sup></h3>
<p><code>form.submit(filter, callback);</code></p>
<ul>
<li>参数 <code>filter</code> 为表单域容器的 <code>lay-filter</code> 属性值</li>
<li>参数 <code>callback</code> 为执行提交事件后的回调函数</li>
</ul>
<p>使用该方法可以实现在任意位置对指定表单的主动提交，相比上述的提交事件更加灵活。</p>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', done: function(obj){
  obj.render()
}}">
  <textarea>
<fieldset class="layui-elem-field">
  <legend>表单内部</legend>
  <div class="layui-field-box">
    <form class="layui-form" lay-filter="form-demo-submit">  
      <input type="text" name="nickname" lay-verify="required" class="layui-input">
    </form>
  </div>
</fieldset>
<button class="layui-btn" id="test-btn-submit">任意位置按钮</button>
<!-- import layui --> 
<script>
layui.use(function(){
  var $ = layui.$;
  var form = layui.form;
  var layer = layui.layer;
  // 任意位置按钮触发提交
  $('#test-btn-submit').on('click', function(){
    form.submit('form-demo-submit', function(data){
      var field = data.field; // 获取表单全部字段值
      console.log(data); // 回调函数返回的 data 参数和提交事件中返回的一致
      // 执行提交
      layer.confirm('确定提交吗？', function(index){
        layer.close(index); // 关闭确认提示框
        // 显示填写结果，仅作演示用
        layer.alert(JSON.stringify(field), {
          title: '当前填写的字段值'
        });
        // 此处可执行 Ajax 等操作
        // …
      });
    });
    return false;
  });
});
</script>
  </textarea>
</pre>
<h2 id="on" lay-toc="{}">事件</h2>
<p><code>form.on('event(filter)', callback);</code></p>
<ul>
<li>参数 <code>event(filter)</code> 是一个特定结构。<code>event</code> 为事件名，支持：<code>select,checkbox,switch,radio,submit</code>；<code>filter</code> 为元素属性 <code>lay-filter</code> 对应的值，若不填，则指向所有同类组件的事件。</li>
<li>参数 <code>callback</code> 为事件执行时的回调函数，并返回一个包含各种值的 <code>object</code> 类型的参数。</li>
</ul>
<p>如下以 <code>select</code> 事件为例：</p>
<pre><code class="layui-code">// 指向所有 select 组件的选择事件
form.on('select', function(data){
  console.log(data);
});
 
// 指向元素为 `&lt;select lay-filter=&quot;test&quot;&gt;&lt;/select&gt;` 的选择事件
form.on('select(test)', function(data){
  console.log(data);
});
</code></pre>
<h2 id="set" class="ws-anchor">全局设置</h2>
<p><code>form.set(options);</code></p>
<ul>
<li>参数 <code>options</code> : 全局属性配置项。详见下表：</li>
</ul>
<table class="layui-table">
<thead>
<tr>
<th>属性名</th>
<th>描述</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>autocomplete</td>
<td>设置 input 框的 <code>autocomplete</code> 属性初始值</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>verIncludelRequired <sup>2.8.4+</sup></td>
<td>验证规则中是否同时包含必填。 form 组件在 <code>2.8.3</code> 版本中调整了内置校验规则，即：仅当非空时进行校验，避免强制携带必填的校验规则。如需保留之前的验证规则（即同时校验必填）,可将该属性设置为 <code>true</code>。但一般还是建议将必填项放置在 <code>lay-verify</code> 属性上，如： <code>lay-verify=&quot;required|number&quot;</code></td>
<td>boolean</td>
<td><code>false</code></td>
</tr>
</tbody>
</table class="layui-table">
<p>该方法用于对 form 组件进行全局设置。</p>
<pre><code class="layui-code">form.set({
  autocomplete: 'off' // 阻止 input 框默认的自动输入完成功能
});
</code></pre>

    </div>
    <div class="ws-text-tools">
      
      <a href="https://github.com/layui/layui/edit/2.x/docs/form/index.md" rel="nofollow" target="_blank" title="在 Github 上编辑此文档">
        <i class="layui-icon layui-icon-edit"></i>
      </a>
      
    </div>
  </div>
</div>
<div class="ws-menu-bar layui-bg-green layui-hide">
  <i class="layui-icon layui-icon-spread-left"></i>
</div>
  
<div class="layui-footer ws-footer">
  <p>
    Copyright &copy; 2023 <a href="../../../index.html">Layui</a> MIT Licensed</p>
  <p id="LAY-footer-info">
    <a href="https://gitee.com/layui/layui/blob/main/DISCLAIMER.md" rel="nofollow" target="_blank">免责声明</a> 
    <a href="https://github.com/layui/layui/blob/main/LICENSE" rel="nofollow" target="_blank">开源协议</a>
    <a href="https://gitee.com/layui/" target="_blank">开源生态</a>
    <a href="https://codepen.io/layui/pen/bGxZXrd" rel="nofollow" target="_blank">在线测试</a>
    <a href="https://gitee.com/layui/layui/issues" rel="nofollow" target="_blank">社区交流</a>
  </p>
  <p>
    <span>
      鸣谢：
      <a href="https://www.upyun.com/?invite=SJ0wu6g2-&referer=layui" target="_blank" sponsor="upyun" style="color: #23A7E8;">
        <strong>又拍云</strong>
      </a>
      <a href="https://gitee.com/?referer=layui" target="_blank" sponsor="Gitee" style="color:#C71D23;">
        <strong>Gitee</strong>
      </a>
      <a href="https://www.iconfont.cn/?referer=layui" target="_blank" sponsor="Gitee" style="color: #9B16FF;">
        <strong>iconfont</strong>
      </a>
    </span>
  </p>
</div>
<div class="ws-shade"></div>
 
<script src="/public/layui/v/2.8.6/layui.js"></script>
<script>
layui.config({
  base: '//res.sentcss.com/static/dist/docs/2.8/modules/',
  version: '16',
  res: '//res.sentcss.com/static/dist/docs/',
  curl: ''
}).use('global',function(w){w.a||w.r&&w.r()});
</script>
 
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?363b2abe8678eec8a6850500ea63a63b";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>